<template>
    <div>
        app公告

        <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
        >
            <el-tab-pane :label="'app内公告'+`(${messageList.length})`" name="first">
                {{ messageList.length > 0 ? '' : '暂无数据' }}
                <div
                    class="messageBox"
                    v-for="item in messageList"
                    :key="item.id"
                >
                    <div class="a_message">
                        <span @click="toMessageDeatil(item)"> {{ item.title }}</span>
                        <el-button type="danger" size="default" @click="renderListFn(item.id)"
                            >删除</el-button
                        >
                    </div>
                </div>
                <br />
                <el-button
                    v-if="unreadList.length > 0"
                    type="primary"
                    size="default"
                    @click="renderListAllFn()"
                    >全部标记已读</el-button
                >
            </el-tab-pane>

        </el-tabs>

        <!-- {{ renderList }} -->
    </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { ref, onMounted } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { useAccountStore } from '@/stores/user'
import { useMessageStore } from '@/stores/message'
import { useRouter } from 'vue-router'
const router = useRouter()
const messageStore = useMessageStore()
const accountStore = useAccountStore()

const messageList = ref([])
// 获取所有消息
const getAllMessage = async () => {
    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/message',
    })
    const { code, info } = res.data
    if (code === 1) {
        messageList.value = info.filter(item => {
            return (
                item.to_user === 'app' 
            )
        })
        console.log(messageList.value)
    }
    getMessageState()
}
// 对应操作员消息状态
const getMessageState = async () => {
    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/message/state',
        params: {
            user: accountStore.account.username,
        },
    })
    const { code, info } = res.data
    if (code === 1) {
        // console.log(JSON.parse(info[0].message))
        let listB
        listB = JSON.parse(info[0].message)
        let listC = messageList.value.map((item, index) => {
            return listB.filter(itemB => {
                return itemB.id == item.id
            })[0]
        })
        let listD = messageList.value.map((item, index) => {
            return { ...item, state: listC[index].state }
        })
        // 需要渲染的数据
        console.log(`需要渲染的数据listD>>>`,listD)
        renderList.value = listD
        unreadList.value = renderList.value.filter(item => item.state == 0)
        readedList.value = renderList.value.filter(item => item.state == 1)
        recycleList.value = renderList.value.filter(item => item.state == 2)
    }
}
// 需要渲染的数据
const renderList = ref('')
// 未读列表
const unreadList = ref('')
// 已读列表
const readedList = ref('')
// 回收站列表
const recycleList = ref('')
// 清空列表 ...

// 删除公告
const renderListFn = async (id)=>{
    console.log(id);
    await axios({
        method: 'post',
        url: 'http://localhost:3000/message/delete',
        data: {
            id
        }
    })
    getAllMessage()

}
// 标记全部已读
const renderListAllFn = ()=>{
    // updateRenderListState(ids,1,1)
}
// 删除已读
const unreadListFn = (id)=>{
    console.log(id);
    updateRenderListState(id,2,0)
}
// 全部删除
const unreadListAllFn = ()=>{
    // updateRenderListState(ids,2,1)
}
// 还原已读
const readedListFn = (id)=>{
    console.log(id);
    updateRenderListState(id,1,0)
}
// 清空回收站
const readedListAllFn = ()=>{
    // updateRenderListState(ids,3,1)
}

// 修改对应id数据状态
const updateRenderListState = async (id,state,all)=>{
    const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/message/state',
        params: {
            user: accountStore.account.username,
        },
    })
    const { code, info } = res.data
    if (code === 1) {
        // console.log(JSON.parse(info[0].message))
    }
    let updataMessage
    if(all==0){
        updataMessage = JSON.parse(info[0].message).map(item=>{
            if(item.id == id) item.state = state 
            return item
        })
    }else{
        updataMessage = JSON.parse(info[0].message).map(item=>{
            item.state = state 
            return item
        })
    }
    console.log(updataMessage);
    
    await axios({
        method: 'post',
        url: 'http://localhost:3000/message/update_operator',
        data: {
            userMessage:updataMessage,
            user: accountStore.account.username,
        },
    })
    getAllMessage()
}


// 跳转消息内容页
const toMessageDeatil = (item)=>{
    // console.log(item);
    messageStore.saveMessage(item)
    router.push({ path: '/messageDetail' })
}

// Tabs 标签页
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    // console.log(tab, event)
}

onMounted(() => {
    getAllMessage()
})
</script>

<style scoped lang="scss">
.messageBox {
    :hover {
        background-color: #f4f7fa;
    }

    .a_message {
        cursor: pointer;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #EAEEF5;
    }
}
</style>
